<script setup lang="ts">
  import { computed } from 'vue'
  import { StrUtil, CommonUtil } from '@xtail/core'
  import { SizeUtil } from '@xtail/ui'
  import { GridAutoFillColsPropsType } from './types'

  defineOptions({
    name: 'SGridAutoFillCols'
  })

  const props = withDefaults(defineProps<GridAutoFillColsPropsType>(), {
    colMinWidth: '1fr',
    className: '',
    style: ''
  })

  const styleComputed = computed(() => {
    if (StrUtil.isStr(props.style)) {
      return (
        `
      ${props.style};
      grid-template-columns: repeat(auto-fill, minmax(${SizeUtil.unitPreHandler(props.colMinWidth)}, 1fr));
    ` +
        (!CommonUtil.isUndefined(props.gap) ? `gap: ${SizeUtil.unitPreHandler(props.gap)};` : '') +
        (!CommonUtil.isUndefined(props.colGap)
          ? `column-gap: ${SizeUtil.unitPreHandler(props.colGap)};`
          : '') +
        (!CommonUtil.isUndefined(props.rowGap)
          ? `row-gap: ${SizeUtil.unitPreHandler(props.rowGap)};`
          : '')
      )
    } else {
      return {
        ...props.style,
        gridTemplateColumns: `repeat(auto-fill, minmax(${SizeUtil.unitPreHandler(props.colMinWidth)}, 1fr))`,
        gap: !CommonUtil.isUndefined(props.gap) ? SizeUtil.unitPreHandler(props.gap) : undefined,
        columnGap: !CommonUtil.isUndefined(props.colGap)
          ? SizeUtil.unitPreHandler(props.colGap)
          : undefined,
        rowGap: !CommonUtil.isUndefined(props.rowGap)
          ? SizeUtil.unitPreHandler(props.rowGap)
          : undefined
      }
    }
  })
</script>

<template>
  <div class="s-grid-auto-fill-cols" :class="className" :style="styleComputed">
    <slot />
  </div>
</template>

<style lang="scss">
  @use './style' as *;
</style>
